$(function(){
    //获取地址栏的id值
    var x = new URLSearchParams(location.search);
    var id = x.get("id");

    //根据商品id查询商品信息
    $.ajax({
        url:"/product/queryProductDetail",
        data:{ id : id },
        success:function(result){
            console.log(result);
            //将数据填入到模板中
            var str = template("product",result);
            //将生成的html字符串放到页面中展示
            $(".mui-content").html( str );

            //mui的组件需要重新初始化
            mui(".mui-slider").slider();
            mui(".mui-numbox").numbox();
        }
    })

    //绑定尺码的点击事件，做排他操作
    $("body").on("click",".size span",function(){
        $(this).addClass("active").siblings().removeClass("active");
    })

    //当用户点击加入购物车的时候，发送ajax请求完成将商品加入购物车的操作
    $("body").on("tap","#addCart",function(){
        //   /cart/addCart这个接口需要三个参数：商品id，尺码，数量
        //1.判断一下用户是否已经选择了尺码  
        if( $(".size span.active").length <= 0  ){
            mui.toast("请选择尺码");
            return;
        }

        //2.获取需要的尺码，数量，商品id
        var size = $(".size span.active").html();
        
        var num = $("#test").val();

        var id = $(this).attr("data-id");

        //3.发送ajax添加购物车
        $.ajax({
            url:"/cart/addCart",
            type:"post",
            data:{productId:id  ,  size:size  , num:num  },
            success:function(result){
                if(result.success == true){
                    mui.toast("添加购物车成功");
                    setTimeout(function(){
                        location.href = "cart.html";
                    },2000);
                }
            }
        })
    })
})